import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers('user');

export default {
    data () {
        return {
            list: []
        }
    },
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        getMenuList (authList) {
            const menu = [];
            const map = {} // 建立一个映射表
            authList.forEach(m => {
                m.children = [];
                map[m.id] = m; // 映射表 如{1：菜单}
                if (m.pid === -1) {
                    menu.push(m) // 如果是根 就直接push到menu中
                } else { // 放在对应的根下面 有的话就放在对应的children上
                    map[m.pid] && map[m.pid].children.push(m)
                }
            })
            return menu
        }
    },
    mounted () { // 获取菜单列表
        this.list = this.getMenuList(this.userInfo.authList)
    },
    render () {
        const renderChildren = (list) => {
            return list.map(child => {
                return child.children.length
                    ? <el-submenu index={child._id}>
                        <div slot="title">{child.name}</div>
                        {/* 如果有孩子的话继续渲染 -- 递归 */}
                        {renderChildren(child.children)}
                    </el-submenu>
                    // 自己对应当前的路径
                    : <el-menu-item index={child.path}>{child.name}</el-menu-item>
            })
        }
        return <el-menu background-color="#333" text-color="#fff" active-text-color="#ffd04b" router={'true'}>{renderChildren(this.list)}</el-menu>
    }
}
